<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <style>
    label.layui-form-label {
      width: 60px;
    }

    div.layui-form-item {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
<!-- 搜索表单 -->
<blockquote class="layui-elem-quote layui-quote-nm">
  <form id="search_form" class="layui-form" action="" lay-filter="search_form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label" style="margin-left:-45px;">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline">
            <select name="category">
              <option value="">请选择标签</option>
              <option value="0">美食</option>
              <option value="1">新闻</option>
              <option value="2">八卦</option>
              <option value="3">体育</option>
              <option value="4">音乐</option>
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">验证日期</label>
          <div class="layui-input-inline">
            <input type="text" name="created" id="createdDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="post-search">
              <i class="layui-icon">&#xe615;</i>搜索
          </button>
        </div>
      </div>
    </form>
</blockquote>

<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd">添加文章</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnDeleteBatch">批量删除</button>


<!-- 文章列表 -->
<table class="layui-hide" id="posts"></table>

<script src="../layui/layui.js" charset="utf-8"></script>
 
<script>
layui.use(['table', 'laydate'], function(){
  var table = layui.table;
  var laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#createdDate'
  });

  table.render({
    elem: '#posts'
    ,cellMinWidth: 80
    ,cols: [[
      {checkbox:true},
      {field:'id', width:80, title: 'ID'},
      {field:'title', minwidth:300, title: '标题'},
      {field:'created', width:220, title: '创建时间'},
      {field:'category', width:150, title: '分类'}
    ]],
    url: '../post/findPage',
    page: true
  });

  var $ = layui.$;
  $('#btnAdd').on('click', function() {

  });

  $('#btnAdd').on('click', function() {

  });

});
</script>

</body>
</html>